<!--
 * @description: 功能
 * @author: Yoke
 * @Date: 2024-08-29 08:39:19
-->
<script setup lang="ts">
import { AddBoxOutlined } from "@vicons/material";
import { DataTableColumns, NButton, NFormItem, NInput } from 'naive-ui';
import { h, inject, ref, watch } from 'vue';

function createData(): any[] {
    return [
        {
            key: 1,
        },
    ]
}
const steps = inject('steps') as any;

const data = ref(createData())
const createColumns = (): DataTableColumns<any> => [
    {
        title: '序号',
        key: 'key',
        align: 'center'
    },
    {
        title: '局点名称',
        key: 'location',
        align: 'center',
        render: () => {
            return steps?.data?.value.step1?.f5
        }
    },
    {
        title: '本地区抗震设防烈度',
        key: 'c3',
        render(row, index) {
            return h(NFormItem, {
                path: `table2[${index}].c3`,
                rule: {
                    required: true,
                    message: '请输入本地区抗震设防烈度',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.c3,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入本地区抗震设防烈度',
                        onUpdateValue(v) {
                            data.value[index].c3 = v
                        },
                        onInput(v) {
                            data.value[index].c3 = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '通信设备抗震设计设防烈度',
        key: 'c4',
        render(row, index) {
            return h(NFormItem, {
                path: `table2[${index}].c4`,
                rule: {
                    required: true,
                    message: '请输入通信设备抗震设计设防烈度',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.c4,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入通信设备抗震设计设防烈度',
                        onUpdateValue(v) {
                            data.value[index].c4 = v
                        },
                        onInput(v) {
                            data.value[index].c4 = v
                        }
                    })
                ]
            })
        },
    },
]
const emit = defineEmits(['update:value'])
watch(() => data, (data) => {
    emit('update:value', data.value)
}, {
    deep: true
})

</script>

<template>
    <n-data-table :columns="createColumns()" :single-line="false" :bordered="true" :data="data" />
</template>